<template>
  <div class="detail-wrapper">
    <div class="detail-header">
      <div class="detail-title">{{ detail.deviceName }}</div>
      <div class="detail-info">地址：{{ detail.address }}</div>
      <div class="detail-info">线路：{{ detail.routeName }}</div>
      <div class="detail-info">负责人：{{ detail.chargeName }}</div>
      <el-button class="warning-btn" @click="handleBack">返回</el-button>
    </div>
    <div class="detail-subTitle">
      <div>
        <em :class="{ 'text-green': detail.onlinestatus == 1 }"></em>
        {{ detail.onlinestatus == 0 ? "离线" : "在线" }}
      </div>
      <div>编号：{{ detail.imei }}</div>
      <div>类型：{{ detail.deviceType }}</div>
    </div>
    <div class="detail-container">
      <div class="detail-box">
        <div>近一月电流趋势图</div>
        <Charts :echartsId="chartId1" :options="options[0]" chartUnitText="A"></Charts>
      </div>
      <div class="detail-box">
        <div>近1个月电压趋势图</div>
        <Charts :echartsId="chartId2" :options="options[1]" chartUnitText="V"></Charts>
      </div>
      <div class="detail-box">
        <div>近一月温度趋势图</div>
        <Charts :echartsId="chartId3" :options="options[2]" chartUnitText="℃"></Charts>
      </div>
      <div class="detail-box">
        <div>近1个月湿度趋势图</div>
        <Charts :echartsId="chartId4" :options="options[3]" chartUnitText="%"></Charts>
      </div>
    </div>
    <div class="detail-warning-log">
      <div class="log-title">故障记录（{{tableData.length}}）</div>
      <el-table :data="tableData" border style="width: 100%" row-class-name="tableClass" >
        <el-table-column type=index label="序号" width="80" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="故障时间" width="180" align="center">
        </el-table-column>
        <el-table-column prop="abnormalType" label="故障类型" width="180" align="center">
        </el-table-column>
        <el-table-column prop="content" label="故障内容" align="center"> </el-table-column>
        <el-table-column prop="chargeName" label="负责人" align="center"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import Charts from "@/components/echarts2";
import { getDeviceDetail, getWaningLog } from "@/api";
export default {
  components: {
    Charts,
  },
  data() {
    return {
      detail: {},
      options: [],
      tableData:[],
      chartId1: `echart${Math.random(0,1)}`,
      chartId2: `echart${Math.random(0,1)}`,
      chartId3: `echart${Math.random(0,1)}`,
      chartId4: `echart${Math.random(0,1)}`,
    };
  },
  created() {
    const deviceId = this.$route.query && this.$route.query.deviceId;
    console.log(this.$route.query);
    this.viewDetail(deviceId);
    this.getWarningLogList(deviceId)
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    viewDetail(deviceId) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getDeviceDetail(deviceId)
        .then((res) => {
          loading.close();
          if (res.statusCode == 200) {
            this.detail = res.data;
            let targetItem = res.data.resData || [];
            // 异常处理
            if (!targetItem) {
              return false;
            }
            let cate = targetItem.map((item) => {
              return item.createDate.split(" ")[0];
            });
            let acurrentData = targetItem.map((item) => {
              return parseInt(item.acurrent) ;
            });
            let bcurrentData = targetItem.map((item) => {
              return parseInt(item.bcurrent) ;
            });
            let ccurrentData = targetItem.map((item) => {
              return parseInt(item.ccurrent) ;
            });
            let avoltageData = targetItem.map((item) => {
              return parseInt(item.avoltage) ;
            });
            let bvoltageData = targetItem.map((item) => {
              return parseInt(item.bvoltage) ;
            });
            let cvoltageData = targetItem.map((item) => {
              return parseInt(item.cvoltage) ;
            });
            let atemperatureData = targetItem.map((item) => {
              return parseInt(item.atemperature) ;
            });
            let btemperatureData = targetItem.map((item) => {
              return parseInt(item.btemperature) ;
            });
            let ctemperatureData = targetItem.map((item) => {
              return parseInt(item.ctemperature) ;
            });
            let temperatureData = targetItem.map((item) => {
              return parseInt(item.temperature) ;
            });
            let humidityData = targetItem.map((item) => {
              return parseInt(item.humidity) ;
            });
            const option1 = {
              dataCate: ["A相电流", "B相电流", "C相电流"],
              categories: cate,
              data1: acurrentData,
              data2: bcurrentData,
              data3: ccurrentData,
            };
            const option2 = {
              dataCate: ["A电缆电压", "B电缆电压", "C电缆电压"],
              categories: cate,
              data1: avoltageData,
              data2: bvoltageData,
              data3: cvoltageData,
            };
            const option3 = {
              dataCate: ["A电缆温度", "B电缆温度", "C电缆温度", "环境温度"],
              categories: cate,
              data1: atemperatureData,
              data2: btemperatureData,
              data3: ctemperatureData,
              data4: temperatureData,
            };
            const option4 = {
              dataCate: ["环境湿度"],
              categories: cate,
              data1: humidityData,
            };
            this.options = [option1, option2, option3, option4];
            console.log('this.options',this.options);
          } else {
            this.$message(res.msg);
          }
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },
    getWarningLogList(deviceId){
      getWaningLog({
        deviceId: deviceId,
      }).then(res =>{
        if(res.statusCode == 200) {
          this.tableData = res.data.items || []
        } else {
          this.$message(res.msg)
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  },
};
</script>
<style lang="less" scoped>
.detail-wrapper {
  padding: 80px 3%;
  .detail-header {
    display: flex;
    color: #fff;
    align-items: baseline;
    .detail-title {
      font-size: 36px;
      color: #ffffff;
      margin-right: 40px;
    }
    .detail-info {
      position: relative;
      margin-right: 25px;
    }
    .warning-btn {
      height: 40px;
      background: #fa6400;
      border-radius: 5px;
      padding: 0 35px;
      color: #fff;
      margin-left: 20px;
      border: none;
    }
  }
  .detail-subTitle {
    display: flex;
    color: #fff;
    margin-top: 40px;
    & > div {
      margin-right: 50px;
    }
    & > div:first-child {
      em {
        display: inline-block;
        width: 24px;
        height: 13px;
        background: #ffc73a;
        border-radius: 10px;
        margin-right: 10px;
      }
      .text-green {
        background: #7ecf69;
      }
    }
  }
  .detail-container {
    position: relative;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .detail-box {
      flex: 0 0 47%;
      & > div:first-child {
        color: #fff;
        text-align: left;
        padding-left: 30px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
  .log-title{
    font-size: 14px;
    font-weight: bold;
    color:#fff;
    margin-bottom: 15px;
    text-align: left;
  }
  /deep/.tableClass{
    background: #1B232D;
    color: #fff;
  }
  /deep/.el-table th.el-table__cell,/deep/.el-table tr{
   background: #1B232D !important;
   color: #fff;
   text-align: center;
  }
  /deep/.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
    background: #1B232D !important;
   color: #fff;
  }
}
</style>
